<template>
  <div class="homepage_container">
    <div class="homepage_header">
      <p>头部</p>
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="tabsClick"
        @tab-change="tabsChange"
      >
        <!-- <el-tab-pane label="User" name="first">User</el-tab-pane>
        <el-tab-pane label="Config" name="second">Config</el-tab-pane>
        <el-tab-pane label="Role" name="third">Role</el-tab-pane>
        <el-tab-pane label="Task" name="fourth">Task</el-tab-pane> -->
        <el-tab-pane
          v-for="(item, index) in moni"
          :key="item.title"
          :label="item.title"
          :name="item.title"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="homepage_menu">
      <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        text-color="#fff"
        :unique-opened="true"
        :router="true"
      >
        <el-menu-item
          v-for="(menu, index) in activeTab.children"
          :key="menu.title"
          :index="menu.name"
        >
          <template #title>
            <!-- <el-icon><location /></el-icon> -->
            <span>{{ menu.title }}</span>
          </template>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="homepage_content">
      <router-view></router-view>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import type { TabsPaneContext, TabPaneName } from "element-plus";
const moni = ref([
  {
    title: "用户管理",
    name: "users",
    children: [
      {
        title: "用户管理",
        name: "users",
        path: "../views/homepage/users/userManagement.vue",
      },
      {
        title: "部门管理",
        name: "bumen",
        path: "../views/homepage/users/bumenManagement.vue",
      },
      {
        title: "角色管理",
        name: "role",
        path: "../views/homepage/users/roleManagement.vue",
      },
      {
        title: "菜单管理",
        name: "menu",
        path: "../views/homepage/users/menuManagement.vue",
      },
    ],
  },
  {
    title: "网站配置",
    name: "selectPeizhi",
    children: [
      {
        title: "选项配置",
        name: "selectPeizhi",
        path: "../views/homepage/customer/customer.vue",
      },
    ],
  },
  {
    title: "客户管理",
    path: "",
    name: "customer",
  },
]);
console.log(moni.value[0]);
const activeName = ref(moni.value[0].title);
const activeTab = ref(moni.value[0]);
console.log(activeName.value);
const tabsClick = (tab: TabsPaneContext, event: Event) => {
  console.log("tabsClick", tab.index, event);
  console.log(activeName.value);
  const selectIndex = tab.index || 0;
  activeTab.value = moni.value[selectIndex * 1];
};
const tabsChange = (name: TabPaneName) => {
  console.log("tabsChange", name);
};
</script>
<style lang="less" scoped>
@import url("../../style/reset.less");
.homepage_container {
  height: 100%;
  position: relative;
  .homepage_header {
    height: 70px;
    background-color: antiquewhite;
  }
  .homepage_menu {
    position: absolute;
    top: 70px;
    left: 0;
    bottom: 0;
    width: 250px;
    background-color: rgb(84, 92, 100);
    // height: calc(100vh - 80px);
  }
  .homepage_content {
    position: absolute;
    top: 70px;
    right: 0;
    left: 250px;
    bottom: 0;
    background-color: rgb(245, 247, 249);
  }
}
// .el-menu-item span{
//   color:white
// }
</style>
